<script setup>
import api from '@/api/index.js'
import { message } from 'ant-design-vue'
import { computed, ref, h, provide } from 'vue'
import MyTable from '@/components/MyTable/MyTable.vue'
import { Modal } from 'ant-design-vue'
import ImageView from '@/components/ImageView/ImageView.vue'
import QRcode from '@/components/QRcode/QRcode.vue'

const props = defineProps({
  // 表格数据总条数
  total: { type: Number, default: 0 },
  // 表格当前页码
  pageNum: { type: Number, default: 1 }
})
// 分页参数
const pagination = computed(() => ({
  total: props.total,
  showSizeChanger: false,
  current: props.pageNum,
  onChange: (e) => {
    emits('pageChange', e)
  }
}))

const emits = defineEmits(['edit', 'pageChange', 'reload'])

// 表格列配置
const columns = ref([
  { ellipsis: false, title: '作物名称', dataIndex: 'cropsName', key: 'cropsName' },
  { ellipsis: false, title: '品种', dataIndex: 'variety', key: 'variety' },
  { ellipsis: false, title: '种植位置', dataIndex: 'areaName', key: 'areaName' },
  { ellipsis: false, title: '种植时间段', key: 'pickDate' },
  { ellipsis: false, title: '宣传时间段', key: 'pickDate1' },
  { ellipsis: false, title: '二维码', key: 'qrcode' },
  { ellipsis: false, title: '作业步骤', key: 'work' },
  { ellipsis: false, title: '操作', key: 'set' }
])

// 编辑数据
const edit = (item) => {
  emits('edit', item)
}

//删除数据
const del = (item) => {
  Modal.warning({
    title: '删除质量管理',
    content: h(
      'span',
      {},
      '是否删除质量管理：',
      h('span', { style: { color: '#09c690' } }, item.cropsName)
    ),
    okText: '删除',
    okCancel: true,
    okButtonProps: { type: 'primary', danger: true },
    cancelButtonProps: { type: 'primary' },
    cancelText: '取消',
    onOk: async () => {
      await api.delZl({ id: item.id })
      message.success('删除成功')
      emits('reload')
      return Promise.resolve()
    },
    onCancel: () => {
      message.success('取消删除')
      return Promise.resolve()
    }
  })
}

provide('columns', columns.value)
</script>

<template>
  <MyTable :pagination="pagination" :scroll="{ y: 'calc(100vh - 383px)' }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'qrcode'">
        <QRcode showViewBtn :content="'https://www.xiaozhuzhnj.top/quality/index.html#/?id=' + record.id"
          :fileName="record.cropsName" />
      </template>
      <template v-if="column.key === 'work'">
        <a-popover :overlay-inner-style="{ padding: 0 }" placement="left">
          <template #content>
            <a-timeline style="padding: 20px">
              <a-timeline-item v-for="item of record.items" :key="item.id">
                {{ item.name }}
                <div style="color: rgb(120, 120, 120)">
                  {{ item.startTime }} - {{ item.endTime }}
                </div>
                <ImageView :value="item.img" />
              </a-timeline-item>
            </a-timeline>
          </template>
          <span style="color: #09c690">查看步骤</span>
        </a-popover>
      </template>
      <template v-if="column.key === 'pickDate'">
        {{ record.startTime }} - {{ record.endTime }}
      </template>
      <template v-if="column.key === 'pickDate1'">
        {{ record.advertStartTime }} - {{ record.advertEndTime }}
      </template>
      <template v-if="column.key === 'set'">
        <AButton type="link" @click="edit(record)">编辑</AButton>
        <AButton type="link" class="com-delbtn" @click="del(record)">删除</AButton>
      </template>
    </template>
  </MyTable>
</template>